<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/3/14 0014
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="/js/echarts.js"></script>

<%--引入vue的js--%>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<%--引入element的js--%>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/axios/axios.min.js"></script>
<%--引入elementui的样式--%>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<html>
<head>
    <title>Title</title>
</head>

<body>

<div id="app">
    <div id="main" style="width: 600px;height:400px;">
    </div>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data:{
            name1:[],
            value1:[]

        },
        created() {
            this.initEcharts();

        },
        methods: {
            initEcharts() {
                axios.post("/emp/echartsTree").then(result => {
                    for (let i=0;i<result.data.length;i++){
                        this.name1.push(result.data[i].name)
                        this.value1.push(result.data[i].value)
                    }
                    console.log(result)
                    console.log(this.value1)
                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.setOption(

                        {
                            xAxis: {
                                type: 'category',
                                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                data:this.name1
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: this.value1,
                                    type: 'bar',
                                    showBackground: true,
                                    backgroundStyle: {
                                        color: 'rgba(180, 180, 180, 0.2)'
                                    }
                                }
                            ]
                        }


                    )
                })
            }
        }


    })

</script>
</body>
</html>

















